window.addEventListener('load',function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 当我们鼠标经过preview就显示和隐藏遮罩层mask和大盒子big；
    preview_img.addEventListener('mouseover',function() {
        mask.style.display = 'block';
        big.style.display = 'block'; 
    })
    preview_img.addEventListener('mouseout',function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    preview_img.addEventListener('mousemove',function(e) {
        // 先计算中鼠标在盒子中的坐标，再赋值给遮罩层的left和top，
        // 为了让鼠标出现在遮罩层的中心位置，只需要让mask向上走高度的一半，
        // 向左走宽度的一半即可
        /* mask.style.left = e.pageX - preview_img.offsetLeft - mask.offsetWidth / 2 + 'px';
        mask.style.top = e.pageY - preview_img.offsetTop - mask.offsetHeight / 2 + 'px'; */
        var maskX = e.pageX - preview_img.offsetLeft - mask.offsetWidth / 2;
        var maskY = e.pageY - preview_img.offsetTop - mask.offsetHeight / 2;
        // 让遮罩层不能出盒子的范围；
        // 如果x的坐标小于0就让它停在0的位置
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= preview_img.offsetWidth - mask.offsetWidth) {
            maskX = preview_img.offsetWidth - mask.offsetWidth;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= preview_img.offsetHeight - mask.offsetHeight) {
            maskY = preview_img.offsetHeight - mask.offsetHeight;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 大图的移动距离 = 小图的移动距离*大图的最大移动距离/小图的最大移动距离；
        var bigImg = document.querySelector('.bigImg');
        var bigX = maskX * (bigImg.offsetWidth - big.offsetWidth) / (preview_img.offsetWidth - mask.offsetWidth);
        var bigY = maskY *(bigImg.offsetHeight - big.offsetHeight) / (preview_img.offsetHeight - mask.offsetHeight);
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })



})